import React from 'react';
import echarts from 'echarts/lib/echarts'; 
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';


class PineChart extends React.Component {

    componentDidMount() {

        let self = this;
        // 初始化
        var myChart = echarts.init(document.getElementById(this.props.chartId));

        myChart.on('click',function(resp){
             let data = resp.data.name;
             data && self.props.showDList && self.props.showDList(data)
        })

        //{"v":1,}
        let _data = self.props.data;
        let fileName = _data.key;
        delete _data.key;
        let legendData = [];
        let serieData = [];
        for (let key in _data) {
            legendData.push(key)
            serieData.push({
                name: key,
                value: _data[key]
            })
        }
        // 绘制图表
        myChart.setOption( {
            title : {
                text:self.props.title+'('+fileName+')', 
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data: legendData
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true, 
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [
                {
                    name:'占比',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data: serieData
                }
            ]
        });
    }
    render() {
        let id = this.props.chartId;
        return (
            <div id={id} style={{ width: '100%', height: 500 }}></div>
        );
    }
}

export default PineChart;